<template>
  <!-- 设备预警 -->
  <view class="earlyWarn">
    <view class="wrapper-content">
      <scroll-view
        scroll-y="true"
        @scrolltolower="scrollBottom"
        @scroll="scrollHeight"
        :style="[
          {
            height: '100%',
          },
        ]"
        v-if="dataSource.length"
      >
        <view
          class="wrapper-item"
          v-for="(item, i) in dataSource"
          :key="i"
          @click="detailsHandle(item, i)"
        >
          <view class="line2-hidden headline">
            <text
              :style="{
                backgroundColor: !item.isRead ? '#EB0101' : '#BBBBBB',
              }"
            ></text>
            {{ item.restaurantName }}-{{ item.deviceName }}
          </view>

          <view class="openOrclose">
            <view class="oc-item">
              <image
                :src="
                  baseImgUrl +
                  (item.purifyStatus == 1
                    ? 'deviceon_1.png'
                    : 'deviceoff_1.png')
                "
                mode="aspectFill"
              ></image>
            </view>

            <view class="oc-item">
              <image
                :src="
                  baseImgUrl +
                  (item.fanStatus == 1 ? 'deviceon_2.png' : 'deviceoff_2.png')
                "
                mode="aspectFill"
              ></image>
            </view>

            <view
              class="oc-item oc-time"
              :class="item.downCleanDay < 0 ? 'oc-timeoff' : 'oc-timeon'"
            >
              清洗倒计时:{{ daySub(item.downCleanDay) }}
            </view>
          </view>

          <view class="item-content">
            <view class="item-cycle">
              <view class="cycleName">油烟浓度</view>
              <view
                :class="
                  item.thickSmokeType == 1
                    ? 'cycleTime'
                    : item.thickSmokeType == 2
                    ? 'orcolor'
                    : 'orcolor'
                "
              >
                {{ item.thickSmoke }}mg/m³
              </view>
            </view>
            <view class="item-cycle">
              <view class="cycleName">颗粒物浓度</view>
              <view
                :class="
                  item.particleHazeType == 1
                    ? 'cycleTime'
                    : item.particleHazeType == 2
                    ? 'orcolor'
                    : 'orcolor'
                "
              >
                {{ item.particleHaze }}mg/m³
              </view>
            </view>
            <view class="item-cycle">
              <view class="cycleName">非甲烷总烃</view>
              <view
                :class="
                  item.nonMethaneType == 1
                    ? 'cycleTime'
                    : item.nonMethaneType == 2
                    ? 'orcolor'
                    : 'orcolor'
                "
              >
                {{ item.nonMethane }}mg/m³
              </view>
            </view>
          </view>

          <view class="detail-class">
            <view>预警时间:{{ item.alarmTime }}</view>
            <view>设备详情></view>
          </view>
        </view>
        <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
      </scroll-view>

      <view v-if="!dataSource.length">
        <u-empty
          mode="list"
          text="暂无内容！"
          :icon="baseImgUrl + 'no-icon2.png'"
        >
        </u-empty>
      </view>
    </view>
  </view>
</template>

<script>
import {
  eventRecordPage,
  eventRecordDetail,
  deviceDetail,
} from "@/api/home.js";
import { handleClickRouter } from "@/utils/util.js";

export default {
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      scrollTop: 0,
      dataSource: [],
      pageBottom: false,
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  onLoad() {
    this.scrollTop = 0;
    uni.removeStorageSync("scrollTop");

    this.pageConfig.pageNo = 1;
    this.dataSource = [];
    this.getList();
  },
  onShow() {
    this.scrollTop = uni.getStorageSync("scrollTop") || 0;
  },
  methods: {
    handleClickRouter,
    scrollHeight(e) {
      uni.setStorageSync("scrollTop", e.detail.scrollTop);
    },
    scrollBottom() {
      let current = (this.pageConfig.pageNo += 1);
      let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
      if (current <= pages) {
        this.getList();
      } else {
        this.pageBottom = true;
      }
    },
    daySub(v) {
      if (v < 0) {
        let vto = v.toString();
        return `逾期${vto.substring(1)}天`;
      }
      return v + "天";
    },
    detailsHandle(item, i) {
      this.dataSource[i].isRead = 1;
      eventRecordDetail({ id: item.id }).then((res) => {});

      deviceDetail({ deviceId: item.deviceId }).then((res) => {
        uni.navigateTo({
          url: `/deviceManagement/deviceManInfo/deviceManInfo?data=${encodeURIComponent(
            JSON.stringify(res.result)
          )}`,
        });
      });
    },
    getList() {
      let data = {
        type: 1,
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };
      eventRecordPage(data).then((res) => {
        this.dataSource = this.dataSource.concat(res.result.records || []);
        this.pageConfig.total = res.result.total;
      });
    },
  },
};
</script>

<style lang="scss">
.earlyWarn {
  height: 100%;
  background: #f8f9fb;

  .wrapper-content {
    margin: 15rpx 15rpx 0;
    height: calc(100% - 30rpx);
    background: #f8f9fb;
    .wrapper-item {
      position: relative;
      padding: 20rpx 25rpx;
      background-color: #ffffff;
      margin-bottom: 20rpx;
    }
  }

  .openOrclose {
    display: flex;

    .oc-item {
      margin: 10rpx 10rpx 10rpx 0;
      border-radius: 32rpx;
      image {
        width: 190rpx;
        height: 48rpx;
      }
    }

    .oc-time {
      padding: 6rpx 15rpx 0;
      height: 50rpx;
      font-size: 24rpx;
      font-weight: 400;
      border-radius: 24rpx;
    }

    // 倒计时
    .oc-timeon {
      color: #00c9ae;
      background: #f8fffe;
      border: 1px solid #c4eee8;
    }

    // 逾期
    .oc-timeoff {
      color: #f34235;
      background: #fff7f6;
      border: 1px solid #ffe3e1;
    }
  }

  .headline {
    margin-bottom: 28rpx;
    padding: 0 15rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;

    text {
      position: absolute;
      top: 16px;
      left: 8px;
      width: 14rpx;
      height: 14rpx;
      border-radius: 50%;
    }
  }

  .item-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 24rpx;

    .item-cycle {
      position: relative;
      padding: 15rpx 10rpx;
      text-align: center;
      width: 32%;
      border-radius: 8rpx;
      line-height: 40rpx;
      background: #f5f7f9;

      .cycleName {
        color: #a1a1a1;
      }

      .cycleTime {
        color: #333333;
      }
    }
  }

  .detail-class {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 24prx;
    color: #a1a1a1;
    padding-top: 20rpx;
  }
}
</style>
